<template>
  <div class="course">
    <div class="menu">
      <div class="first" @click="backHome">返回首页</div>
    </div>
    <div class="body">
      <div class=" body-main">
        <!-- <el-table-column></ -->
          <div class="courseList" v-for="item in courses">
            <div class="row1">{{item.courseName}}</div>
            <div class="row2">{{item.startTime}}</div>
            <div class="row3">{{item.teacherName}}</div>
            <div class="row4">
              <img class="row4-img" @click="lookWork(item.id)" :src="item.imgUrl"/>
            </div>
          </div>
        </div>
      <div class="page">
        <el-pagination
        :total="total"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total,prev, pager, next"
        @current-change="handleCurrentChange"
      />
      </div>
    </div>
  </div>
</template>
<script setup>
import {ref} from 'vue'
import { useRouter } from 'vue-router';
import {getCourseListAPI} from '../../../api/student/course';
import { onMounted } from 'vue';

const router=useRouter()
const currentPage=ref(1)
const pageSize=ref(6)
const total=ref(2)
const courses=ref([
  {id:1,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  {id:2,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  {id:3,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  {id:4,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  {id:5,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  {id:6,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  {id:4,courseName:'数据结构1',teacherName:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:5,courseName:'数据结构1',teacher:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
  // {id:6,courseName:'数据结构1',teacher:'小明',startTime:'2024.06.11-2024',imgUrl:'https://tse3-mm.cn.bing.net/th/id/OIP-C.yiE0B22xDqq-SjAh_8xdVwHaEh?w=259&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7'},
])

const backHome=()=>{
  console.log("点击了返回首页")
}
const lookWork=(id)=>{
  console.log('点击了查看作业详情',id)
  router.push({
    path:'/st-home/studyPlace/work',
    query:{
      courseId:id
    }
  })
}

const getCourseList=async()=>{
  let params={
    pageNo:currentPage.calue,
    pageSize:pageSize.value
  }
  const result=await getCourseListAPI(params)
  console.log("从后端获取到的课程列表",result)
  courses.value=result.data.data.list
}
//分页
const handleCurrentChange=()=>{
  console.log("当前页码数",currentPage.value)
  getStudentList()
}
onMounted(()=>{
  getCourseList()
})
</script>
<style scoped>
.course{
  height: 99%;
  width: 100%;
  padding-top: 1%;
  /* background-color: antiquewhite; */
  display: flex;
  /* flex-direction: column; */
}
.menu{
  height: 30%;
  width: 8%;
  background-color: rgb(255, 255, 255);
  position: fixed;
  border: 1.5px solid rgba(179, 179, 179, 0.158);
  border-radius:8px;
  float: left;
}
.first{
  width: 100%;
  height: 20%;
  /* background-color: aquamarine; */
  border-bottom: 1.5px solid rgba(179, 179, 179, 0.158);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: default;
  /* float: left; */
}
.first:hover{
  background-color: rgba(179, 179, 179, 0.158);
}
.body{
  width: 90.5%;
  height: 100%;
  margin-left: 1%;
  margin-left: 10.5%;
  display:flex;
  flex-direction: column;
  /* background-color:yellow; */
}
.body-main{
  height: 100%;
  width: 100%;
  /* background-color: red; */
  /* display: flex; */
  /* border: 1.5px solid rgba(77, 76, 76, 0.158); */
}
.courseList{
  width: 32%;
  height: 31%;
  float: left;
  margin-right:1%;
  margin-bottom:1%;
  border-radius:8px;
  box-shadow: var(--el-box-shadow-light);
}
.row1{
  height:13%;
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* border-bottom: 1.5px solid rgba(77, 76, 76, 0.158); */
}
.row2{
  height:8%;
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size:11px;
  color:#A8ABB2;
}
.row3{
  height:13%;
  width:100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size:14px;
  color:#A8ABB2;
  /* font-size:17px; */
}
.row4{
  height:66%;
  width:100%;
}
.row4-img{
  height:100%;
  width:100%;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
}
.page{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: 1%;
}
:deep(.btn-prev){
  /* background-color: rgb(1, 85, 158); */
  height: 1em;
}
:deep(.number){
  /* background-color: rgb(54, 121, 180); */
  height: 1em;
}
:deep(.btn-next.is-last){
  /* background-color: antiquewhite; */
  height: 1em;
}
:deep(.el-pagination){
  height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
}
</style>